<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body
        {
            font-size:70%;
            HTML 5 从入门到精通-中文学习教程
            第 27 页, 总 261 页 05-16-2011
            font-family:verdana,helvetica,arial,sans-serif;
        }
    </style>
    <script type="text/javascript">
        function cnvs_getCoordinates(e)
        {
            x=e.clientX;
            y=e.clientY;
            document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
        }
        function cnvs_clearCoordinates()
        {
            document.getElementById("xycoordinates").innerHTML="";
        }
    </script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
     onmousemove="cnvs_getCoordinates(event)"
     onmouseout="cnvs_clearCoordinates()"></div>
<br />
HTML 5 从入门到精通-中文学习教程
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>
